<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>z-UI后台框架</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>


    <script type="text/javascript" src="index/jquery.min.js"></script>


    <link rel="stylesheet" type="text/css" href="z-UI.css">
    <link rel="stylesheet" type="text/css" href="index/flex.css">


    <script type="text/javascript" src="index/index.min.js"></script>
    <style>
        html{
            width: 100%;height: 100%;
        }
    </style>

</head>
<body class="zUI-full">


<div class="zUI-app">
    <div class="zUI-header">
        <div class="zUI-logo" style="color:#eee;cursor: pointer">
            <img src="index/logo.png">
            z - UI
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" style="padding-left: 0;">

            <li class="layui-nav-item layui-this">
                <a href="javascript:;" id="top_menu_1" onclick="selectPart('1')">个人中心</a>

            </li>
        </ul>
    </div>

    <div class="zUI-left" id="float-left">
        <div class="zUI-hide-scroll">
            <ul class="zUI-nav top_body_mark" id="top_body_1">

                <li class="zUI-second-nav">
                    <a href="javascript:;" onclick="switchItem(this)">组件</a>
                    <dl class="zUI-nav-child">
                        <dd>
                            <a href="javascript:;" onclick="addMenu('tab')">选项卡</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('card')">面板/面板组</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('button')">按钮</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('alert')">弹窗</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('badge')">徽章</a>
                        </dd>

                        <dd>
                            <a href="javascript:;" onclick="addMenu('form')">表单</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('validate')">表单验证</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('list-tran')">穿梭框</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('tip')">提示工具</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('slider')">滑块</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('code')">代码修饰</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('table')">数据表格</a>
                        </dd>
                    </dl>
                </li>
                <li class="zUI-second-nav">
                    <a href="javascript:;" onclick="switchItem(this)">其他插件</a>
                    <dl class="zUI-nav-child">
                        <dd>
                            <a href="javascript:;" onclick="addMenu('svg-line')">svg连线</a>
                        </dd>
                        <dd>
                            <a href="javascript:;" onclick="addMenu('context-menu')">右键菜单</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>


    <div class="zUI-body flex flex-lie" id="right-body">
        <div class="zUI-bar-content" id="tbarBox">

            <!--<div class="tab-item selected-tab" id="tbarItem_0"><div class="tab-title" title="首页" onclick="switchTbar(0)"><i class="fa fa-home" style="color:#aaa;line-height: 35px;font-size: 14px;margin-right:4px;"></i>首页</div><div class="tab-close"><a href="javascript:void(0)" onclick="closeTbar(0)"><i class="layui-icon layui-icon-password not-close"></i></a></div></div>-->
        </div>

        <div class="zUI-iframe">
            <div class="fload-plugin" id="float-tool">
                <div><i class="fa fa-angle-left"></i></div>
            </div>
            <!--<iframe src="../z-UI-alert/alert.html" id="iframe_0" name="iframe_0" style="width: 100%;height:100%;background: white" frameborder="0"></iframe>-->
        </div>
    </div>
</div>
<script>
    var menu = {
        '0':{
            title:'弹窗',
            url:'alert.html'
        },
        'card':{
            title:'面板/面板组',
            url:'card.html'
        },
        'alert':{
            title:'弹窗',
            url:'alert.html'
        },
        'button':{
            title:'按钮',
            url:'button.html'
        },
        'badge':{
            title:'徽章',
            url:'badge.html'
        },
        'tab':{
            title:'选项卡',
            url:'tab.html'
        },
        'form':{
            title:'表单',
            url:'form.html'
        },
        'svg-line':{
            title:'svg连线',
            url:'z-UI-plugin/svg-line/index.html'
        },
        'validate':{
            title:'表单验证',
            url:'z-UI-validate/validate.html'
        },
        'list-tran':{
            title:'穿梭框',
            url:'list-tran.html'
        },
        'tip':{
            title:'提示工具',
            url:'tip.html'
        },
        'slider':{
            title:'滑块',
            url:'slider.html'
        },
        'context-menu':{
            title:'滑块',
            url:'context-menu.html'
        },
        'code':{
            title:'代码修饰',
            url:'code.html'
        },
        'table':{
            title:'数据表格',
            url:'table.html'
        }
    };

    function switchItem(o){
        if($(o).next().is(':visible')){
            $(o).next().hide();
        }else{
            $(o).next().show();
        }
    }
    function addMenu(key){
        if(menu[key]){
            addTbar(menu[key]);
        }
    }
    $(function(){
        addTbar(menu[0]);
    })
</script>

</body>
</html>